<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>移动互联网大数据</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8"/>

    <!-- Bootstrap -->
    <link href="/assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/down/font-awesome.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

    <link rel="stylesheet" href="/assets/css/vendor/animate/animate.min.css">
    <link type="text/css" rel="stylesheet" media="all" href="/assets/js/vendor/mmenu/css/jquery.mmenu.all.css"/>
    <link rel="stylesheet" href="/assets/js/vendor/videobackground/css/jquery.videobackground.css">
    <link rel="stylesheet" href="/assets/css/vendor/bootstrap-checkbox.css">

    <link rel="stylesheet" href="/assets/js/vendor/rickshaw/css/rickshaw.min.css">
    <link rel="stylesheet" href="/assets/js/vendor/morris/css/morris.css">
    <link rel="stylesheet" href="/assets/js/vendor/tabdrop/css/tabdrop.css">
    <link rel="stylesheet" href="/assets/js/vendor/summernote/css/summernote.css">
    <link rel="stylesheet" href="/assets/js/vendor/summernote/css/summernote-bs3.css">
    <link rel="stylesheet" href="/assets/js/vendor/chosen/css/chosen.min.css">
    <link rel="stylesheet" href="/assets/js/vendor/chosen/css/chosen-bootstrap.css">

    <link href="/assets/css/minimal.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/assets/down/html5shiv.js"></script>
    <script src="/assets/down/respond.min.js"></script>
    <![endif]-->

    <script src="/command/echarts/echarts.min.js"></script>
    <script src="/command/echarts/echarts.js"></script>
    <script src="/command/echarts/echarts-gl.js"></script>
    <script src="/command/echarts-wordcloud.min.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/assets/down/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/assets/js/vendor/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/videobackground/jquery.videobackground.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/blockui/jquery.blockUI.js"></script>

    <script src="/assets/js/vendor/flot/jquery.flot.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.time.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.selection.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.animator.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.orderBars.js"></script>
    <script src="/assets/js/vendor/easypiechart/jquery.easypiechart.min.js"></script>

    <script src="/assets/js/vendor/rickshaw/raphael-min.js"></script>
    <script src="/assets/js/vendor/rickshaw/d3.v2.js"></script>
    <script src="/assets/js/vendor/rickshaw/rickshaw.min.js"></script>

    <script src="/assets/js/vendor/morris/morris.min.js"></script>

    <script src="/assets/js/vendor/tabdrop/bootstrap-tabdrop.min.js"></script>

    <script src="/assets/js/vendor/summernote/summernote.min.js"></script>

    <script src="/assets/js/vendor/chosen/chosen.jquery.min.js"></script>

    <script src="/assets/js/minimal.min.js"></script>

    <script type="text/javascript" src="/rankView/js/websocket.js"></script>

</head>
<body class="bg-1">


<!-- Preloader -->
<div class="mask">
    <div id="loader"></div>
</div>
<!--/Preloader -->

<!-- Wrap all page content here -->
<div id="wrap">


    <!-- Make page fluid -->
    <div class="row">


        <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation"
             id="navbar">


            <!-- Branding -->
            <div class="navbar-header col-md-2">
                <a class="navbar-brand" href="index.html">
                    <strong>移动互联网</strong>大数据
                </a>
                <div class="sidebar-collapse">
                    <a href="#">
                        <i class="fa fa-bars"></i>
                    </a>
                </div>
            </div>
            <!-- Branding end -->


            <!-- .nav-collapse -->
            <div class="navbar-collapse" id="tobar">

                <!-- Page refresh -->
                <ul class="nav navbar-nav refresh">
                    <li class="divided">
                        <a href="#" class="page-refresh"><i class="fa fa-refresh"></i></a>
                    </li>
                </ul>
                <!-- /Page refresh -->

                <!-- Search -->
                <!--                <div class="search" id="main-search">-->
                <!--                    <i class="fa fa-search"></i> <input type="text" name="oid" id="oid" placeholder="Search...">-->

                <!--                </div>-->
                <!-- Search end -->

                <!-- Quick Actions -->
                <ul class="nav navbar-nav quick-actions">

                    <li class="dropdown divided">

                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                            <i class="fa fa-envelope"></i>
                            <span class="label label-transparent-black" id="currmessnum">1</span>
                        </a>

                        <ul class="dropdown-menu wider arrow nopadding messages" id="messagebox">
                            <li>
                                <a class="cyan" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/ici-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Ing. Imrich Kamarel</span>
                                        <span class="time">12 mins</span>
                                        <div class="message-content">Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="green" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/arnold-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Arnold Karlsberg</span>
                                        <span class="time">1 hour</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing
                                            elit
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/profile-photo.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">John Douey</span>
                                        <span class="time">3 hours</span>
                                        <div class="message-content">Excepteur sint occaecat cupidatat non proident,
                                            sunt in culpa qui officia
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="red" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/peter-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Peter Kay</span>
                                        <span class="time">5 hours</span>
                                        <div class="message-content">Ut enim ad minim veniam, quis nostrud
                                            exercitation
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="orange" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/george-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">George McCain</span>
                                        <span class="time">6 hours</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing
                                            elit
                                        </div>
                                    </div>
                                </a>
                            </li>


                            <li class="topborder"><a href="#">Check all messages <i class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>

                    </li>
                    <li class="dropdown divided">

                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                            <i class="fa fa-bell"></i>
                            <span class="label label-transparent-black">3</span>
                        </a>

                        <ul class="dropdown-menu wide arrow nopadding bordered">
                            <li><h1>You have <strong>3</strong> new notifications</h1></li>

                            <li>
                                <a href="#">
                                    <span class="label label-green"><i class="fa fa-user"></i></span>
                                    New user registered.
                                    <span class="small">18 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-red"><i class="fa fa-power-off"></i></span>
                                    Server down.
                                    <span class="small">27 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-orange"><i class="fa fa-plus"></i></span>
                                    New order.
                                    <span class="small">36 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-cyan"><i class="fa fa-power-off"></i></span>
                                    Server restared.
                                    <span class="small">45 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-amethyst"><i class="fa fa-power-off"></i></span>
                                    Server started.
                                    <span class="small">50 mins</span>
                                </a>
                            </li>

                            <li><a href="#">Check all notifications <i class="fa fa-angle-right"></i></a></li>
                        </ul>

                    </li>

                    <li class="dropdown divided user" id="current-user">
                        <div id="image" class="profile-photo">

                        </div>
                        <a class="dropdown-toggle options" data-toggle="dropdown" href="#">
                            <span id="username"></span> <i class="fa fa-caret-down"></i>
                        </a>

                        <ul class="dropdown-menu arrow settings">

                            <li>

                                <h3>背景颜色:</h3>
                                <ul id="color-schemes">
                                    <li><a href="javascript:;" class="bg-1" onclick="bgchange(1)"></a></li>
                                    <li><a href="javascript:;" class="bg-2" onclick="bgchange(2)"></a></li>
                                    <li><a href="javascript:;" class="bg-3" onclick="bgchange(3)"></a></li>
                                    <li><a href="javascript:;" class="bg-4" onclick="bgchange(4)"></a></li>
                                    <li><a href="javascript:;" class="bg-5" onclick="bgchange(5)"></a></li>
                                    <li><a href="javascript:;" class="bg-6" onclick="bgchange(6)"></a></li>
                                </ul>

                                <!--                                <div class="form-group videobg-check">-->
                                <!--                                    <label class="col-xs-8 control-label">Video BG</label>-->
                                <!--                                    <div class="col-xs-4 control-label">-->
                                <!--                                        <div class="onoffswitch greensea small">-->
                                <!--                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"-->
                                <!--                                                   id="videobg-check">-->
                                <!--                                            <label class="onoffswitch-label" for="videobg-check">-->
                                <!--                                                <span class="onoffswitch-inner"></span>-->
                                <!--                                                <span class="onoffswitch-switch"></span>-->
                                <!--                                            </label>-->
                                <!--                                        </div>-->
                                <!--                                    </div>-->
                                <!--                                </div>-->

                            </li>

                            <li class="divider"></li>

                            <li>
                                <a th:href="@{'/userView'}"><i class="fa fa-user"></i> 个人信息</a>
                            </li>


                            <li>
                                <a href="#"><i class="fa fa-envelope"></i> 未读消息
                                    <span class="badge badge-red"
                                          id="user-inbox">3</span>
                                </a>
                            </li>

                            <li class="divider"></li>

                            <li>
                                <a href="/invalidsession"><i class="fa fa-power-off"></i> 退出</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="#mmenu"><i class="fa fa-comments"></i></a>
                    </li>
                </ul>
                <!-- /Quick Actions -->


                <!-- Sidebar -->
                <ul class="nav navbar-nav side-nav" id="sidebar">

                    <li class="collapsed-content">
                        <ul>
                            <li class="search"><!-- Collapsed search pasting here at 768px --></li>
                        </ul>
                    </li>

                    <li class="navigation" id="navigation">
                        <a href="#" class="sidebar-toggle" data-toggle="#navigation">导航 <i
                                class="fa fa-angle-up"></i></a>

                        <ul class="menu">

                            <li class="dropdown">
                                <a href="index">
                                    <i class="fa fa-tachometer"></i> 主页
                                    <!--                                    <span class="badge badge-red">1</span>-->
                                </a>
                            </li>
                            <li class="dropdown open active">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-list"></i> 排行榜 <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="active">
                                        <a th:href="@{'/appsView'}">
                                            <i class="fa fa-caret-right"></i> 应用程序
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/gameView'}">
                                            <i class="fa fa-caret-right"></i> 游戏
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/gzhListView'}">
                                            <i class="fa fa-caret-right"></i> 微信公众号
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/livenessView'}">
                                            <i class="fa fa-caret-right"></i> 应用活跃度
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/overseasView'}">
                                            <i class="fa fa-caret-right"></i> 海外应用
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-desktop"></i> 系统管理 <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a th:href="@{'/userView'}">
                                            <i class="fa fa-caret-right"></i> 查看用户信息
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/logout'}">
                                            <i class="fa fa-caret-right"></i> 退出登录
                                        </a>
                                    </li>
                                </ul>
                            </li>


                        </ul>

                    </li>

                    <!--                    <li class="summary" id="order-summary">-->
                    <!--                        <a href="#" class="sidebar-toggle underline" data-toggle="#order-summary">Orders Summary <i-->
                    <!--                                class="fa fa-angle-up"></i></a>-->

                    <!--                        <div class="media">-->
                    <!--                            <a class="pull-right" href="#">-->
                    <!--                                <span id="sales-chart"></span>-->
                    <!--                            </a>-->
                    <!--                            <div class="media-body">-->
                    <!--                                This week sales-->
                    <!--                                <h3 class="media-heading">26, 149</h3>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <!--                        <div class="media">-->
                    <!--                            <a class="pull-right" href="#">-->
                    <!--                                <span id="balance-chart"></span>-->
                    <!--                            </a>-->
                    <!--                            <div class="media-body">-->
                    <!--                                This week balance-->
                    <!--                                <h3 class="media-heading">318, 651</h3>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <!--                    </li>-->

                    <!--                    <li class="settings" id="general-settings">-->
                    <!--                        <a href="#" class="sidebar-toggle underline" data-toggle="#general-settings">General Settings <i-->
                    <!--                                class="fa fa-angle-up"></i></a>-->

                    <!--                        <div class="form-group">-->
                    <!--                            <label class="col-xs-8 control-label">Switch ON</label>-->
                    <!--                            <div class="col-xs-4 control-label">-->
                    <!--                                <div class="onoffswitch greensea">-->
                    <!--                                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"-->
                    <!--                                           id="switch-on" checked="">-->
                    <!--                                    <label class="onoffswitch-label" for="switch-on">-->
                    <!--                                        <span class="onoffswitch-inner"></span>-->
                    <!--                                        <span class="onoffswitch-switch"></span>-->
                    <!--                                    </label>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <!--                        <div class="form-group">-->
                    <!--                            <label class="col-xs-8 control-label">Switch OFF</label>-->
                    <!--                            <div class="col-xs-4 control-label">-->
                    <!--                                <div class="onoffswitch greensea">-->
                    <!--                                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"-->
                    <!--                                           id="switch-off">-->
                    <!--                                    <label class="onoffswitch-label" for="switch-off">-->
                    <!--                                        <span class="onoffswitch-inner"></span>-->
                    <!--                                        <span class="onoffswitch-switch"></span>-->
                    <!--                                    </label>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                        </div>-->

                    <!--                    </li>-->


                </ul>
                <!-- Sidebar end -->


            </div>
            <!--/.nav-collapse -->


        </div>
        <!-- Fixed navbar end -->


        <!-- Page content -->
        <div id="content" class="col-md-12">


            <!-- page header -->
            <!--            <div class="pageheader">-->


            <!--                <h2><i class="fa fa-tachometer"></i> Dashboard-->
            <!--                    <span>// Place subtitle here...</span></h2>-->


            <!--                <div class="breadcrumbs">-->
            <!--                    <ol class="breadcrumb">-->
            <!--                        <li>You are here</li>-->
            <!--                        <li><a href="index.html">Minimal</a></li>-->
            <!--                        <li class="active">Dashboard</li>-->
            <!--                    </ol>-->
            <!--                </div>-->


            <!--            </div>-->
            <!-- /page header -->


            <!-- content main container -->
            <div class="main">
                <iframe src="/getAppsByName/1/?titlename=" style="height: 840px;width: 1640px"></iframe>

                <div class="row">
                    <div class="col-md-6">
                        <section class="tile transparent recent-activity">
                        </section>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>

            </div>
            <!-- /content container -->


        </div>
        <!-- Page content end -->


        <div id="mmenu" class="right-panel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a href="#mmenu-users" data-toggle="tab"><i class="fa fa-users"></i></a></li>
                <li class="" id="historyMenu"><a href="#mmenu-history" data-toggle="tab"><i
                        class="fa fa-clock-o"></i></a></li>
                <li class=""><a href="#mmenu-friends" data-toggle="tab"><i class="fa fa-heart"></i></a></li>
                <li class=""><a href="#mmenu-settings" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="mmenu-users">
                    <h5><strong>Online</strong> Users</h5>

                    <ul class="users-list">

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Ulaanbaatar, Mongolia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Bratislava, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/peter-avatar.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Peter <strong>Kay</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Kosice, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/george-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">George <strong>McCain</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Prague, Czech Republic</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar1.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Lucius <strong>Cashmere</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Wien, Austria</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar2.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Jesse <strong>Phoenix</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Berlin, Germany</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                    <h5><strong>Offline</strong> Users</h5>

                    <ul class="users-list">

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar4.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Dell <strong>MacApple</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Paris, France</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar5.jpg" alt>
                                </a>

                                <div class="media-body">
                                    <h6 class="media-heading">Roger <strong>Flopple</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Rome, Italia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar6.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Nico <strong>Vulture</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Kyjev, Ukraine</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar7.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Bobby <strong>Socks</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Moscow, Russia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar8.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Anna <strong>Opichia</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Budapest, Hungary</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div>

                <div class="tab-pane" id="mmenu-history">
                    <h5><strong>Chat</strong> History</h5>

                    <ul class="history-list">

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                        tempor</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                                        eu fugiat nulla pariatur</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/peter-avatar.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Peter <strong>Kay</strong></h6>
                                    <small>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                        deserunt mollit </small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div>

                <div class="tab-pane" id="mmenu-friends">
                    <h5><strong>Friends</strong> List</h5>
                    <ul class="favourite-list">

                        <li class="online">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Bratislava, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar8.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Anna <strong>Opichia</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Budapest, Hungary</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar1.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Lucius <strong>Cashmere</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Wien, Austria</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Ulaanbaatar, Mongolia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>


                    </ul>
                </div>

                <div class="tab-pane pane-settings" id="mmenu-settings">
                    <h5><strong>聊天</strong> 设置</h5>

                    <ul class="settings">

                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">显示离线用户</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-offline">
                                        <label class="onoffswitch-label" for="show-offline">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>


                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">历史记录启用</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-history">
                                        <label class="onoffswitch-label" for="show-history">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>


                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">展示未读条数</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-unread">
                                        <label class="onoffswitch-label" for="show-unread">
                                            <span class="onoffswitch-switch"></span>
                                            <span class="onoffswitch-inner"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div><!-- tab-pane -->

            </div><!-- tab-content -->
        </div>


    </div>
    <!-- Make page fluid-->


</div>
<!-- Wrap all page content end -->


<section class="videocontent" id="video"></section>

</body>
</html>